<template>
  <div class="mime">
    <nut-navbar fixed>
      <template #left>
        <div>我的</div>
      </template>
      <template #right>
        <div>设置</div>
      </template>
    </nut-navbar>

    <div class="notice">
      <nut-noticebar
        text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
        :background="`#fff`"
        :color="`#000`"
      ></nut-noticebar>
    </div>

    <div class="head">
      <nut-avatar size="large" @click="logout">
        <img src="@/assets/mime/head.png" />
      </nut-avatar>
      <div class="nameBox">
        <span class="name">{{
          null != user && user.nickname != "" && user.nickname != null
            ? user.nickname
            : "未登录"
        }}</span>
        <span class="integral"><nut-tag plain>积分1100</nut-tag></span>
      </div>
    </div>

    <div class="order">
      <nut-grid :column-num="5">
        <nut-grid-item @click="jumpToOrderListPage(1, [0])">
          <nut-badge :value="orderNumStatistics.waitPay"
            ><img src="@/assets/mime/order/waitpay.png" alt=""
          /></nut-badge>
          <slot name="text"><span class="name">待付款</span></slot>
        </nut-grid-item>
        <nut-grid-item @click="jumpToOrderListPage(2, [1])">
          <nut-badge :value="orderNumStatistics.waitConsign"
            ><img src="@/assets/mime/order/waitreceive.png" alt=""
          /></nut-badge>
          <slot name="text"><span class="name">待发货</span></slot>
        </nut-grid-item>
        <nut-grid-item @click="jumpToOrderListPage(3, [2])">
          <nut-badge :value="orderNumStatistics.waitReceive"
            ><img src="@/assets/mime/order/waitreceive.png" alt=""
          /></nut-badge>
          <slot name="text"><span class="name">待收货</span></slot>
        </nut-grid-item>
        <nut-grid-item>
          <nut-badge :value="0"
            ><img src="@/assets/mime/order/service.png" alt=""
          /></nut-badge>
          <slot name="text"><span class="name">售后</span></slot>
        </nut-grid-item>
        <nut-grid-item @click="jumpToOrderListPage(0, null)">
          <nut-badge :value="0"
            ><img src="@/assets/mime/order/order.png" alt=""
          /></nut-badge>
          <slot name="text"><span class="name">我的订单</span></slot>
        </nut-grid-item>
      </nut-grid>
    </div>

    <div class="collect">
      <nut-grid :column-num="4">
        <nut-grid-item v-for="(item, index) in collect.list" :key="index">
          <img :src="item.icon" alt="" />
          <slot name="text">
            <span class="name">{{ item.name }}</span>
          </slot>
        </nut-grid-item>
      </nut-grid>
    </div>

    <div class="menu">
      <nut-cell-group>
        <nut-cell title="积分商城" to="/">
          <template #icon>
            <img src="@/assets/mime/menu/integral.png" />
          </template>
        </nut-cell>
        <nut-cell title="我的钱包" to="/">
          <template #icon>
            <img src="@/assets/mime/menu/wallet.png" />
          </template>
        </nut-cell>
        <nut-cell title="收货地址" to="/address/list">
          <template #icon>
            <img src="@/assets/mime/menu/address.png" />
          </template>
        </nut-cell>
        <nut-cell title="客户服务" to="/">
          <template #icon>
            <img src="@/assets/mime/menu/service.png" />
          </template>
        </nut-cell>
      </nut-cell-group>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const store = useStore();
const router = useRouter();
const { proxy } = getCurrentInstance();

import authApi from "@/api/authApi";
import userUtils from "@/utils/userUtils";

const user = computed(() => {
  return store.state.userModule.userInfo;
});

// 不同状态订单数量
const orderNumStatistics = ref({});

// 跳转到我的订单页面
const jumpToOrderListPage = (index, statusList) => {
  router.push({
    path: "/order/list",
    query: { index: index, statusList: statusList },
  });
};

/**
 * 退出登录
 */
const logout = () => {
  authApi.login
    .logout()
    .then((res) => {
      userUtils.clearUser();
      userUtils.clearToken();
    })
    .catch((error) => {});
};

const collect = reactive({
  list: [
    {
      name: "优惠券",
      icon: require("@/assets/mime/collect/coupon.png"),
    },
    {
      name: "商品收藏",
      icon: require("@/assets/mime/collect/product.png"),
    },
    {
      name: "店铺关注",
      icon: require("@/assets/mime/collect/shop.png"),
    },
    {
      name: "浏览记录",
      icon: require("@/assets/mime/collect/record.png"),
    },
  ],
});

// 页面加载完成
onMounted(() => {
  proxy.$orderApi.member
    .orderNumStatistics(proxy.$userUtils.getUserId())
    .then((res) => {
      orderNumStatistics.value = res.data;
    });
});
</script>

<style lang="less" scoped>
.mime {
  padding: 0px 5px;
  .notice {
    margin-top: 5px;
  }
  .head {
    background: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 5px;
    padding: 10px 5px;
    border-radius: 5px;
    img {
    }
    .nameBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 10px;
      .integral {
        font-size: 12px;
        margin-top: 6px;
        color: #fa2c19;
        .nut-tag--default.nut-tag--plain {
          color: #fa2c19;
          border-color: #fa2c19;
        }
      }
    }
  }
  .order {
    margin-top: 5px;
    .nut-grid-item__text {
      margin: 0;
    }
    img {
      width: 24px;
      height: 24px;
    }
    .name {
      margin-top: 5px;
      font-size: 12px;
    }
  }
  .collect {
    margin-top: 5px;
    .nut-grid-item__text {
      margin: 0;
    }
    img {
      width: 24px;
      height: 24px;
    }
    .name {
      margin-top: 5px;
      font-size: 12px;
    }
  }
  .menu {
    margin-top: 5px;
    img {
      width: 20px;
      height: 20px;
    }
    :deep(.nut-cell__title) {
      font-size: 13px;
    }
    :deep(.nut-cell-group__wrap) {
      margin: 0px;
    }
  }
}
</style>